<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>分类</title>
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link href="../css/apps.css" />		
		<script src="../js/vue.js"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-lazyload.js"></script>
		<script src="../js/ajax.js"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
			});
		</script>
	</head>
	<body>
		<div id="app">
			<van-row id="tou"> <!-- 头部导航栏 -->
				<van-col span="20">
					<van-search placeholder="搜索商品名称" background="red"></van-search>
				</van-col>
				<van-col span="4"><!-- 头部图标 -->
					<div  style="background-color: red;height: 44px;padding-top: 10px;"><van-icon  name="chat-o" size="35px" id="icon"></van-icon></div>
				</van-col>
			</van-row>
			<section><!-- 肚子 -->
				<van-row>
					<van-col span="6">
						<van-badge-group :active-key="activeKey" @change="onChange">
							<van-badge @click="change(item)" :title="item.Name" v-for="item in Categories">

							</van-badge>
						</van-badge-group>
					</van-col>
					<van-col span="18">
						<van-col span="12" v-for="item in products">
							<div style="width: 100%;">
								<img v-lazy="item.GoodsImageUrl" style="width: 100%;" alt="">
							</div>
							<div>
								{{item.Name}}
							</div>
						</van-col>
					</van-col>
				</van-row>


			</section>
		</div>
		<script type="text/javascript">
			Vue.use(VueLazyload, {
                error:"../img/shopping_default_3.jpg",//加载失败后加载其他图片。
				loading:"../img/44.gif", //加载中显示图片
            });
						var vm = new Vue({
							el: "#app",
							data: {
								active: 1,
								activeKey:1,
								Categories: [],
								products: []
							},
							methods: {
								onChange: function(key) {
									this.activeKey = key;
								},
								change: function(item) {
									this.getProduct(this.Categories[this.activeKey].Id)
								},
								getCategories: function() {
									var _this = this;
									ajax({
										url: "http://dsapi.ysd3g.com/api/Categories",
										dataType: "jsonp",
										success: function(res) {
											_this.Categories = res.Categories;
											_this.getProduct(_this.Categories[_this.activeKey].Id)
										}
									})
								},
								getProduct: function(id) {
									var _this = this;
									ajax({
										url: "http://dsapi.ysd3g.com/api/GoodsByCategoryId",
										dataType: "jsonp",
										data: {
											typeId: id,
											p: 1
										},
										success: function(res) {
											_this.products = res.Data;
										}
									})
								}
							},
							created() {
								this.getCategories();
							}
						})
		</script>
	</body>
</html>
